<template>
  <view class="waterfall-container">
    <!-- 临时容器：用于初始加载图片 -->
    <view v-if="!isSplitDone" class="temp-container">
      <image
        v-for="item in list"
        :key="item.id"
        :src="item.url"
        mode="widthFix"
        class="temp-image"
        @load="onImageLoad($event, item)"
      />
    </view>
    <!-- 瀑布流容器 -->
    <scroll-view v-else scroll-y class="waterfall-scroll">
      <view class="waterfall">
        <view class="column left-column">
          <view v-for="item in leftList" :key="item.id" class="item">
            <image :src="item.url" mode="widthFix" class="item-image" />
            <text class="item-desc">{{ item.desc }}</text>
          </view>
        </view>
        <view class="column right-column">
          <view v-for="item in rightList" :key="item.id" class="item">
            <image :src="item.url" mode="widthFix" class="item-image" />
            <text class="item-desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue"

// 初始图片数据
const list = ref([
  {
    id: 1,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
    desc: "描述1描述1描述1描述1描述",
    height: 0
  },
  {
    id: 2,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
    desc: "描述2",
    height: 0
  },
  {
    id: 3,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg",
    desc: "描述3",
    height: 0
  },
  {
    id: 4,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
    desc: "描述4",
    height: 0
  },
  {
    id: 5,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg",
    desc: "描述3描述3描述3描述3描述3描述3描述3描述3描述3",
    height: 0
  },
  {
    id: 6,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
    desc: "描述3描述3描述3描述3描述3描述3描述3描述3描述3",
    height: 0
  },
  {
    id: 7,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg",
    desc: "描述3描述3描述3描述3描述3描述3描述3描述3描述3",
    height: 0
  },
  {
    id: 8,
    url: "https://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg",
    desc: "描述3描述3描述3描述3描述3描述3描述3描述3描述3",
    height: 0
  }
])

const leftList = ref([])
const rightList = ref([])
const leftHeight = ref(0)
const rightHeight = ref(0)
const loadedCount = ref(0) // 已加载图片计数
const isSplitDone = ref(false) // 是否完成分列

// 图片加载事件
const onImageLoad = (e, item) => {
  const { height } = e.detail // 获取图片高度
  item.height = height
  loadedCount.value += 1
  // 当所有图片加载完成时，执行分列
  if (loadedCount.value === list.value.length) {
    splitIntoColumns()
    isSplitDone.value = true // 显示瀑布流
  }
}

// 分列逻辑
const splitIntoColumns = () => {
  leftList.value = []
  rightList.value = []
  leftHeight.value = 0
  rightHeight.value = 0

  list.value.forEach((item) => {
    if (leftHeight.value <= rightHeight.value) {
      leftList.value.push(item)
      leftHeight.value += item.height
    } else {
      rightList.value.push(item)
      rightHeight.value += item.height
    }
  })
}

onMounted(() => {
  loadedCount.value = 0 // 初始化计数
})
</script>

<style scoped>
.waterfall-container {
  width: 100%;
  height: 100vh;
}
.temp-container {
  position: absolute;
  opacity: 0; /* 隐藏临时容器 */
}
.temp-image {
  width: 0; /* 隐藏图片 */
  height: 0;
}
.waterfall-scroll {
  width: 100%;
  height: 100%;
}
.waterfall {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}
.column {
  width: 48%;
}
.item {
  margin-bottom: 20rpx;
}
.item-image {
  width: 100%;
}
.item-desc {
  font-size: 28rpx;
  text-align: center;
}
</style>
